<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="pt" class="demo-form-inline" :rules="addRules" ref="addForm">
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="pt.idNumber" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btClick('addForm')">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="patiendInfo" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="birthday" label="出生日期"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </el-main>
    <el-main>
      发药-退药
      <el-table :data="itemData" style="width: 100%">
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
        <el-table-column prop="id" label="项目编码" width="160"></el-table-column>
        <el-table-column prop="drugName" label="药品名字" width="160"></el-table-column>
        <el-table-column prop="num" label="药品数量" width="160"></el-table-column>
        <el-table-column prop="totalCount" label="总费用" width="160"></el-table-column>
        <el-table-column prop="realCount" label="已付费用" width="160"></el-table-column>
        <el-table-column prop="status" label="当前状态" width="160"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="selectDeliver(scope.row)" type="text" size="small">发 药</el-button>
            <el-button @click="selectWithdrawal(scope.row)" type="text" size="small">退 药</el-button>
          </template>
        </el-table-column>
        <!-- 其实在el-table下,书写的各个列的信息,然后会根据userData自动生成n行 -->
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="registHandleSizeChange"
          @current-change="registHandleCurrentChange"
          :current-page.sync="registCurrentPageNum"
          :page-sizes="[1, 5, 10]"
          :page-size="registPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="registTotalRecord"
        ></el-pagination>
      </div>
    </el-main>
    <el-dialog title="选定项目" :visible.sync="queryDialogVisible">
      <el-header></el-header>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </el-container>
</template>
<script>
import { Dwithdrawal, selectInfo, deliver } from "@/api/drugDisturb.js";
export default {
  data() {
    let validIdnumber = (rule, value, callback) => {
      
      if (
        value &&
        (!/\d{17}[\d|x]|\d{15}/.test(value) ||
          (value.length !== 15 && value.length !== 18))
      ) {
        callback(new Error("身份证号码不符合规范"));
      } else {
        callback();
      }
    };
    return {
      addForm: "",
      addRules: {
        idNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: validIdnumber, trigger: "blur" }
        ]
      },
      pt:{
        idNumber:""
      },
      registPageSize: 5,
      registTotalRecord: 3,
      registCurrentPageNum: 1,
      queryDialogVisible: false,
      multipleSelection: [],
      patiendId: "",
      patiendInfo: [
        {
          name: "",
          idNumber: "",
          address: "",
          birthday: ""
        }
      ],
      item: {
        id: "",
        drugName: "",
        num: "",
        totalCount: "",
        realCount: "",
        status: ""
      },
      itemData: [],
      itemPay: [],
      itemSelect: []
    };
  },
  methods: {
    btClick(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        }
        else{
          this.patiendId =  this.pt.idNumber;
          this.getInfo();
        }
      });
    },
    getInfo() {
      let tmp = {
        patientId: this.patiendId,
        curPage: this.registCurrentPageNum,
        pageSize: this.registPageSize
      };
      console.log("tmp:");
      console.log(tmp);
      selectInfo(tmp).then(response => {
        if (response.data.code == 0) {
          this.patiendInfo = [];
          this.itemData = [];
          if (response.data.data.data != null) {
            for (var i = 0; i < response.data.data.data.records.length; i++) {
              let tmp = {
                id: response.data.data.data.records[i].id,
                drugName: response.data.data.data.records[i].drugName,
                num: response.data.data.data.records[i].num,
                totalCount: response.data.data.data.records[i].totalCount,
                realCount: response.data.data.data.records[i].realCount,
                status: response.data.data.data.records[i].status
              };
              this.itemData.push(tmp);
            }
          }
          let tmp = {
            name: response.data.data.patient.name,
            idNumber: response.data.data.patient.idNumber,
            address: response.data.data.patient.address,
            birthday: response.data.data.patient.birthday
          };
          this.patiendInfo.push(tmp);
          console.log(this.itemData);
        } else {
          this.$message("身份证号不正确或不存在项目！");
        }
      });
    },
    registHandleSizeChange(val) {
      console.log("页大小：" + val);
      this.registPageSize = val;
      this.getInfo();
    },
    registHandleCurrentChange(val) {
      console.log("当前页：" + val);
      this.registCurrentPageNum = val;
      this.getInfo();
    },
    selectDeliver(val) {
      this.itemSelect = [];
      this.itemSelect.length = 0;
      console.log(this.itemSelect);
      console.log("run deliver");
      // console.log(val)
      if (val.status == "未发") {
        this.itemSelect.push(val.id);
        let tmp = {
          drugDisturbId: this.itemSelect
        };
        deliver(tmp).then(response => {
          this.getInfo();
          if (response.data.code == 0) {
            this.$message("操作成功！");
          } else {
            this.$message("操作失败！");
          }
        });
      } else {
        this.$message("操作失败！");
      }
    },
    selectWithdrawal(val) {
      this.itemSelect = [];
      this.itemSelect.length = 0;
      console.log(this.itemSelect);
      console.log("run withdrawal");
      // console.log(val)
      if (val.status == "已发") {
        this.itemSelect.push(val.id);
        let tmp = {
          drugDisturbId: this.itemSelect
        };
        Dwithdrawal(tmp).then(response => {
          this.getInfo();
          if (response.data.code == 0) {
            this.$message("操作成功！");
          } else {
            this.$message("操作失败！");
          }
        });
      } else {
        this.$message("操作失败");
      }
    },
    cancel() {
      this.multipleSelection.pop();
      // this.multipleSelection = [];
      // this.getInfo();
      this.queryDialogVisible = false;
    }
  }
};
</script>
